<template>
  <div class="main-content">
    <el-card style="width: 70%; margin: 20px auto;" class="resizable-box">
      <div style="display: flex;margin-left: 150px">
        <el-steps :active="4" simple finish-status="success">
          <el-step class="custom-step" style="width: 180px" title="按地区进行查找" icon="el-icon-edit"
                   @click="$router.push('/front/home')"></el-step>
          <el-step class="custom-step" style="width: 180px" title="选择医院和科室" icon="el-icon-edit"
                   @click="$router.push('/front/doctor')"></el-step>
          <el-step class="custom-step" style="width: 180px" title="查看专家出诊预约" icon="el-icon-edit"
                   @click="$router.push('/front/doctorDetail')"></el-step>
          <el-step class="custom-step" style="width: 180px" title="填写信息并缴费" icon="el-icon-edit"></el-step>
          <el-step class="custom-step" style="width: 120px" title="预约成功等待通知" icon="el-icon-edit"></el-step>
        </el-steps>
      </div>
      <el-card style="width: 70%;margin: 20px auto;height: 880px;" >
        <div class="square-box" style="color: #4b8400;width: 900px;font-size: 24px;margin-top: 20px">
          <label style="padding-left: 5px">第 4 步： 请详细填写您的个人信息，以便我们能及时与您联系!</label>
        </div>
        <div style="color: #538115;margin-top: 10px;margin-bottom: 10px;font-size: 20px">以下是您预约的专家基本资料:</div>
        <div class="square-box" style="background-color: #ffffff;width: 900px">
            <div style="display: flex">
              <div style="margin-top: 20px;margin-left:20px;">
                <img :src="DoctorData.avatar" alt="" class="circle-image">
              </div>
              <div style="flex: 3;margin-left: 20px">
                <div style="margin-left: 10px; margin-top: 10px; font-size: 18px">
                  <LABEL>专家名称:
                    <label @click="$router.push('/front/DoctorDetail?id='+DoctorData.id)"
                           style="cursor: pointer;color: #538115">{{ DoctorData.name }}</label>
                  </LABEL>
                  <label style="margin-left: 30px">
                    所属医院:
                    <label @click="$router.push('/front/HospitalDoctor?id='+DoctorData.hospitalId)"
                           style="cursor: pointer;color: #538115">{{ DoctorData.hospitalName }}</label>
                  </label>
                  <label style="margin-left: 30px">
                    所属科室:
                    <label @click="$router.push('/front/OfficeDoctor?id='+DoctorData.officeId)"
                           style="cursor: pointer;color: #538115">{{ DoctorData.officeName }}</label>
                  </label>
                </div>
                <div class="divider" style="margin-top: 10px"></div>
                <div style="font-size: 16px; color: #666666;margin-top: 10px">
                  <p>擅长治疗: {{ DoctorData.skill }}</p>
                </div>
                <div style="margin-top: 10px; font-size: 16px">
                  <LABEL>出诊时间:
                    <label style="color: red">{{ this.date }}</label>  <label style="color: red">{{ this.time}}</label>
                  </LABEL>
                  <label style="margin-left: 30px">
                    出诊地点: {{ DoctorData.hospitalName }}
                  </label>
                </div>
                <div style="margin-top: 10px;font-size: 16px">
                  <label>挂号费用: <label style="color: red">¥{{ DoctorData.price }}</label></label>
                  <label style="margin-left: 80px">门诊电话: <label style="color: orange">{{ DoctorData.officePhone}}</label></label>
                  <el-button @click="chat(DoctorData.id)" type="success" style="font-size: 16px;width: 120px;margin-left: 200px">医前咨询</el-button>
                </div>
              </div>
          </div>
        </div>
        <el-form :model="form" :rules="rules" ref="formRef" label-width="200px">
          <div>
            <div style="margin-top: 20px;display: flex">
              <el-form-item label="请输入患者疾病:" prop="disease">
                <el-input v-model="form.disease" style="width: 500px" placeholder="请输入有效疾病（小于12个字符）"></el-input>
              </el-form-item>
            </div>
            <div style="margin-top: 30px;display: flex">
              <el-form-item label="请输入疾病具体描述:" prop="diseaseDescription">
                <el-input v-model="form.diseaseDescription" style="width: 500px;" class="no-resize" type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="请输入内容"></el-input>
              </el-form-item>
            </div>
            <div style="margin-top: 30px;display: flex">
              <el-form-item label="请输入患者姓名:" prop="patientName">
                <el-input v-model="form.patientName" style="width: 400px" placeholder="中文(小于12个字符)"></el-input>
                <label style="margin-left: 80px;margin-top: 5px">性别:</label>
                <el-radio-group v-model="form.gender" style="margin-left: 20px;">
                  <el-radio label="1">男</el-radio>
                  <el-radio label="2">女</el-radio>
                </el-radio-group>
              </el-form-item>
            </div>
            <div style="margin-top: 20px;display: flex">
              <el-form-item label="请输入患者身份证:" prop="peopleCard">
                <el-input v-model="form.peopleCard" style="width: 500px" placeholder="填写有效身份证"></el-input>
              </el-form-item>
            </div>
            <div style="margin-top: 20px;display: flex">
              <el-form-item label="请输入患者手机号码:" prop="phone">
                <el-input v-model="form.phone" style="width: 500px" placeholder="填写有效手机号码"></el-input>
              </el-form-item>
            </div>
            <el-form-item style="margin-top: 20px;margin-left: 100px">
              <el-button style="height: 50px;font-size: 18px" size="medium" type="primary" @click="submitForm(DoctorData.price)">付费挂号</el-button>
              <el-button style="margin-left: 40px;height: 50px;font-size: 18px"  size="medium" type="warning" @click="resetForm">重置信息</el-button>
            </el-form-item>
          </div>
        </el-form>
      </el-card>
    </el-card>
  </div>
</template>
<script>
export default {
  name: "reservation",
  data() {
    let doctorId = this.$route.query.doctorId;
    let date = this.$route.query.date;
    let time = this.$route.query.time;
    return {
      user: JSON.parse(localStorage.getItem('xm-user') || '{}'),
      doctorId:doctorId,
      date:date,
      time:time,
      DoctorData:[],
      form: {
        disease: '',
        diseaseDescription: '',
        patientName: '',
        gender: '',
        peopleCard: '',
        phone: ''
      },
      rules: {
        disease: [
          { required: true, message: '请输入疾病名称', trigger: 'blur' },
          { min: 1, max: 12, message: '疾病名称长度应在1到12个字符之间', trigger: 'blur' }
        ],
        diseaseDescription: [
          { required: false, message: '请输入疾病描述', trigger: 'blur' }
        ],
        patientName: [
          { required: true, message: '请输入患者姓名', trigger: 'blur' },
          { pattern: /^[\u4e00-\u9fa5]{1,12}$/, message: '姓名应为中文且长度小于12个字符', trigger: 'blur' }
        ],
        gender: [
          { required: true, message: '请选择性别', trigger: 'change' }
        ],
        peopleCard: [
          { required: true, message: '请输入身份证号码', trigger: 'blur' },
          { pattern: /^\d{15}(\d{2}[A-Za-z0-9])?$/, message: '身份证号码格式不正确', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入手机号码', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '手机号码格式不正确', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.loadDoctor()
  },
  methods: {
    chat(chatId) {
      if(this.user.role==="DOCTOR"){
        this.$message.warning("当前角色不支持该操作");
        return
      }
      // 发送第一个请求以获取 chatRoleId1 和 chatRoleId2
      this.$request.post('/chatRole/add', { chatUserId: chatId, userId: this.user.id }).then(res => {
        if (res.code === '200') {
          // 获取返回的 mapData
          const resultMap = res.data;  // resultMap 应该包含 chatRoleId1 和 chatRoleId2
          // 从 resultMap 中提取 ID
          const chatRoleId1 = resultMap.chatRoleId1;
          const chatRoleId2 = resultMap.chatRoleId2;
          // 使用提取的 ID 发送第二个请求
          this.$request.post('/chatGroup/add', { chatUserId: chatRoleId1, userId: chatRoleId2 }).then(res => {
            if (res.code === '200') {
              // 请求成功，跳转到聊天页面
              this.$router.push('/front/chat');
            } else {
              // 显示错误信息
              this.$message.error(res.msg);
            }
          });
        } else {
          // 显示错误信息
          this.$message.error(res.msg);
        }
      });
    },
    loadDoctor() {
      this.$request.get('/doctor/selectByDoctorId', { params: { doctorId: this.doctorId } }).then(res => {
        if (res.code === '200') {
          this.DoctorData = res.data;
        }
      }).catch(error => {
        // 处理可能发生的错误
        this.$message.error('加载医生信息失败');
        console.error(error);
      });
    },
    submitForm(price) {
      if(this.user.role==="DOCTOR"){
        this.$message.warning("当前角色不支持该操作");
        return
      }
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          const requestData = {
            ...this.form, // 展开 this.form 的属性
            doctorId:this.doctorId,
            appointmentTime:this.time,
            price:price
          };
          this.$request({
            url: '/reservation/add',
            method: 'post', // 假设您正在执行 POST 请求
            data: requestData
          }).then(res => {
            if (res.code === '200') { // 表示成功保存
              this.$message.success('预约成功');
              window.history.back();
            } else {
              this.$message.error(res.msg); // 弹出错误的信息
            }
          }).catch(error => {
            // 处理请求异常
            this.$message.error('请求异常，请稍后再试');
          });
        }
      });
    },
    resetForm() {
      this.$refs.formRef.resetFields();
    }
  }
}
</script>

<style scoped>


/* 修改表头背景色 */
/deep/ .el-table__header th {
  background-color: #007d67; /* 设置你想要的背景色 */
  color: #333; /* 设置文字颜色 */
  font-weight: bold; /* 可选：设置文字粗细 */
}

.custom-step .el-step__title {
  font-weight: normal; /* Default font weight */
}

.custom-step.is-active .el-step__title {
  font-weight: bold; /* Bold font weight for active step */
  color: #ea1f4b; /* Change the color of the active step */
}

.custom-step.is-finish .el-step__title {
  color: #67C23A; /* Change the color for completed steps */
}
.no-resize .el-textarea__inner {
  resize: none; /* 禁用用户调整大小 */
}



</style>
